<template>
  <div class="map-echart">
    <div ref="echarts" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
var myChart;
export default {
  props: {
    map: {
      type: String,
      default: () => {},
    },
  },
  data() {
    return {
      type: "bar",
      xdata: ["2022-01-01", "2022-01-02", "2022-01-03"],
      ydata: [1, 2, 3, 4],
      option: {},
      falg: false,
    };
  },
  mounted() {
    this.initCharts();
    this.initChartsPie();
  },
  watch: {
    map(e) {
      this.type = e;
      if (this.type == "pie") {
        this.initChartsPie();
      } else {
        this.initCharts();
      }
    },
  },
  methods: {
    initCharts() {
      myChart = echarts.init(this.$refs.echarts);
      const option = {
        xAxis: {
          type: "category",
          data: this.xdata,
        },
        yAxis: {
          type: "value",
          data: this.ydata,
        },
        series: [
          {
            name: "1",
            type: this.type,
            data: [5, 20, 30],
          },
        ],
      };

      myChart.setOption(option);

      window.onresize = function () {
        myChart.resize();
      };
    },

    initChartsPie() {
      if (this.type == "pie") {
        echarts.init(this.$refs.echarts).dispose();
        myChart = echarts.init(this.$refs.echarts);
      }

      const optionPie = {
        series: [
          {
            name: "1",
            type: this.type,
            data: [5, 20, 30],
          },
        ],
      };
      myChart.setOption(optionPie);

      window.onresize = function () {
        myChart.resize();
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.charts {
  width: 300px;
  height: 200px;
  background-color: #00000033;
}
</style>